#carousel,body{
  margin:0;
  padding:0;


  $contentHeight:200px;//内容区的高度
  $contentWidth:310px;//内容区的宽度
  $imagesNum:3;//轮播图片的数量,也是按钮的数量


  $buttonBottomPercent:7%;//按钮区距离底部的百分比
  $spanWidth:10px;//按钮的宽度
  $spanHeight:10px;//按钮的高度
  $spanSpacing:10px;//按钮的间距

  $nextPrevHeight:40px;//前后键的高度
  $nextPrevWidth:40px;//前后键的宽度


  @mixin spanStyle($width,$height){
    display:block;
    float:left;
    width:$width;
    height:$height;
  }


  .content{
    position:relative;//相对于他本身的位置，这里设为默认的位置
    width:$contentWidth;//
    height:$contentHeight;

    margin-top: 100px;
    margin-left: 300px;

    overflow: hidden;//超出部分隐藏

    .images{
      position:absolute;//相对于.content的位置
      height:100%;

      left:-($contentWidth*(($imagesNum)-1));
      width:$contentWidth*$imagesNum;//

      img{
        height:100%;
        width:$contentWidth;//
      }
    }

    .buttons{
      position:absolute;
      bottom:$buttonBottomPercent;
      left:(($contentWidth)-($spanWidth)*($imagesNum)-($spanSpacing)*$imagesNum)/2.0;
      z-index:222;

      span{
        @include spanStyle($spanWidth,$spanHeight);
        margin-left:$spanSpacing;
        border:1px solid grey;
        //background-color: black;
        border-radius: 100%;

        &:hover{
          cursor:pointer;
          //background-color: red;
        }

        transition: 0.1s;

      }
    }

    .on{
      background:red;
    }


    .prev,.next{
      position:absolute;
      top:(($contentHeight)-($nextPrevHeight))/2.0;
      z-index:22;

      img{
        @include spanStyle($nextPrevWidth,$nextPrevHeight);
        &:hover{
          cursor:pointer;
          background-color: rgba(12, 18, 55, 0.3);
        }
        transition: 0.2s;
      }

    }
    .prev{
      left:0;
    }
    .next{
      right:0;
    }

  }
}